<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Only CSS: Motion Blur</title>
  <style>
    body2 {
  background: #fff;
  height: 200vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.motionblur2 {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box2 {
  position: absolute;
  left: calc(200% - 50px);
  width: 100px;
  height: 100%;
  background: #957fc4;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box2::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(149, 127, 196, 0.5) 50%, rgba(149, 127, 196, 0) 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
}
.box2::after {
  content: '';
  position: absolute;  left:20px;top:100px; 
  left: -100px;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(149, 127, 196, 0) 0%, rgba(149, 127, 196, 0.5) 50%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}

  body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 800px;
  height: 150px;
}
.motionblur {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box {
  position: absolute;
  left: calc(80% - 40px);
  width: 100px;
  height: 100%;
  background: #957fc4;
  -webkit-animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.box::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(149, 127, 196, 0.5) 50%, rgba(149, 127, 196, 0) 100%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95)-1.5s infinite;
}
.box::after {
  content: '';
  position: absolute;
  left: -100px;
  width: 200px;
  height: 100%;
  background: linear-gradient(90deg, rgba(149, 127, 196, 0) 0%, rgba(149, 127, 196, 0.5) 50%);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
          animation: scale 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.3, 1, 1);
            transform: scale3d(1.3, 1, 1);
  }
  55% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
  100% {
    -webkit-transform: scale3d(0.5, 1, 1);
            transform: scale3d(0.5, 1, 1);
  }
}
@-webkit-keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
@keyframes slide {
  0% {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="motionblur2">
  <div class="box2">
  </div>
<div class="motionblur">
  <div class="box">
  </div>
<!-- partial -->
</body>
</html>